<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./vue.js"></script>
    <script src="./elementui.js"></script>
    <script src="./mock.js"></script>
    <script src="./list.js"></script>
  </head>
  <style>
      ::v-deep .el-table th,
      ::v-deep .el-table td {
        text-align: center !important;
      }
    </style>
  <body>
    <div id="app">
      <div style="width: 98%;margin:50px auto 20px auto;">
        <el-input
          style="width:300px"
          v-model="search"
          size="mini"
          placeholder="输入昵称进行搜索"
          ></el-input>
          <el-button type="primary" size="mini" @click="doFilter">搜索</el-button>
        </div>
        <el-table ref="multipleTable" :data="listData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width:98%;margin:0 auto;" :default-sort="{prop: 'date', order:'descending'}" height="500"  v-loading="loading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-table-column
            label="序号"
            type="index" :index='indexMethod'
            width="50" align="center" fixed>
          </el-table-column>
          <el-table-column prop="date" label="增长码编号" width="180" align="center"></el-table-column>
          <el-table-column prop="id" label="用户ID" width="100" align="center"></el-table-column>
          <el-table-column prop="name" label="手机号" width="180" align="center"></el-table-column>
          <el-table-column label="头像" width="180" align="center">
            <span slot-scope="scope">
              <img :src="scope.row.url" alt="" style="border-radius:50%">
            </span>
          </el-table-column>
          <el-table-column prop="name" label="昵称" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="昵称" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="昵称" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="昵称" width="180" align="center"></el-table-column>
          <el-table-column
            prop="date"
            label="注册时间"
            width="180"
            sortable></el-table-column>
          <el-table-column prop="address" fixed="right" label="微信添加时间" align="center"></el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 30px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>
      </div>
      　<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
      <script src="./axios.min.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: {
            total: 0,
            pagesize:10,
            currentPage:1,
            listData: [],
            search: '',
            loading: false
          },
          computed: {
            // listData() {
            //   const search = this.search;
            //   if(search) {
            //     return this.listData.filter(data=>{
            //       console.log(data)
            //       return Object.keys(data).some(key=>{
            //         return String(data[name]).toLocaleLowerCase().indexOf(search)>-1
            //       })
            //     })
            //   }
            //   return this.listData
            // }
          },
          mounted() {
            this.getData();
          },
          methods: {
            getData: function () {
              var _this = this;
              _this. loading = true;
              axios({
                headers: {'Content-Type': 'application/json;charset=UTF-8'},
                method: 'get',
                url: 'listData'
              }).then(function(res){
                _this. loading = false;
                console.log(res.data.listData)
                _this.listData = res.data.listData;
                _this.total = res.data.listData.length;
              }).catch(function(err){
                _this. loading = false;
                console.log(err)
              })
            },
            indexMethod:function(index) {
              index = (index+1) + (this.currentPage-1)*this.pagesize
              return index
          },
          current_change:function(currentPage){
            this.currentPage = currentPage;
          },
          doFilter() {
            console.log(this.search)
            var _this = this;
            var tableList = [];
            if(_this.search=='') {
              _this.getData()
            }
            _this.listData.forEach((value,index)=>{
              if(value.name) {
                if(value.name.indexOf(_this.search)>=0) {
                  tableList.push(value)
                }
              }
            })
            console.log(tableList)
            _this.listData = tableList;
            _this.currentPage = 1;
            _this.total = tableList.length
            
          }
        }  
        });
        // $(function(){
        //   $.ajax({
        //     url: 'listData',
        //     type: 'get',
        //     dataType: 'json',
        //     contentType: 'application/json',
        //     // data: JSON.stringify({
        //     //   mobile: mobile,
        //     //   project: project,
        //     //   userName: userName
        //     // }),

        //     success: function (res) {
        //       console.log(res)
        //     },
        //     error: function (err) {
        //       console.log(err)
        //     }
        //   })
        // })
        </script>
    </body>
  </html>
